<template>
	<view class="staff-manage">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="staff-list">
			<view class="staff-item" v-for="(item,index) in list" :key="index">
				<view class="info">
					<view class="name">{{item.realname}}</view>
					<view class="account">账号：{{item.contact_phone}}</view>
				</view>
				<view class="btn-group">
					<u-button class="btn" type="error" size="small" plain @click="del(item)">删除</u-button>
					<u-button class="btn" type="primary" size="small" plain
						@click="pageRoute('/merchantPages/staff-manage/staff-form?staff_id='+item.id+'&store_id='+store_id)">编辑</u-button>
				</view>
			</view>

			<view class="empty-data" v-if="list.length===0">暂无员工</view>
		</view>

		<view class="footer">
			<view class="btn-group">
				<u-button class="btn" type="primary" size="large" block
					@click="pageRoute('/merchantPages/staff-manage/staff-form')">添加员工</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '员工管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		store_id: 0,
		isMore: true,
		list: []
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		let selStore = cache.get('selStore');
		if (selStore) {
			state.store_id = selStore.id;
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		state.list = [{
			id: 1,
			realname: '杨成',
			contact_phone: '13066660012'
		}, {
			id: 2,
			realname: '谢敏',
			contact_phone: '13066660013'
		}];
		// getDataList();
	}

	function getDataList() {
		if (!state.isMore) {
			uni.showToast({
				title: '没有更多了！',
				icon: 'none'
			})
			return;
		}
		let params = {
			store_id: state.store_id,
			skip: state.list.length,
		};
		request.get('store.staff/list', params).then(res => {
			console.log('资质列表', res);
			state.isMore = res.data.is_more;
			if (state.list.length == 0) {
				state.list = res.data.data;
			} else {
				state.list = state.list.concat(res.data.data);
			}
		})
	}

	function del(item) {
		uni.showModal({
			title: '提示',
			content: '删除后员工将无法登录，确认要删除吗？',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					handleDelete(item.id);
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}

	function handleDelete(id) {
		request.post('store.staff/del', {
			id: id
		}).then(res => {
			console.log('删除员工', res);
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		store_id,
		isMore,
		list,
	} = toRefs(state);
</script>

<style lang="scss">
	.staff-manage {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.staff-list {
			padding: $m24;

			.staff-item {
				@include f-between;
				margin-bottom: $m24;
				padding: $m24;
				border-radius: $radius-16;
				background-color: #fff;

				&:last-child {
					margin-bottom: 0;
				}

				.info {
					.name {
						color: $main-color;
						font-weight: 500;
					}

					.role,
					.account {
						margin-top: 4rpx;
						font-size: $font-24;
						color: $tips-color;
					}
				}

				.btn-group {
					align-self: flex-end;

					:deep(.u-button) {
						margin-left: $m20;
					}
				}
			}

			.empty-data {
				margin-bottom: $m24;
				padding: $m24;
				background-color: #fff;
				border-radius: $radius-16;
				text-align: center;
				align-items: center;
				justify-content: center;
			}
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {}
		}
	}
</style>